<template>
	<div class="addGoods w944">
		<alert ref="alert"></alert>
		<div class="label_top">
			<p><i class="line"></i>{{updateTitle}}</p>
		</div>
		<div class="addCont">
			<div class="addName marB"><span>商品名称：</span>
				<el-input placeholder="请输入商品名称..." v-model="itemName"></el-input>
			</div>
			<div class="addName marB"><span>可用学分：</span>
				<el-input placeholder="请输入可用学分..." v-model="itemPrice"></el-input>
			</div>
			<div class="addSubTuijian marB">
				<span>领取方式：</span>
				<el-select v-model="fetchWay" placeholder="请选择领取方式">
					<el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</div>
			<div class="addName marB text"><span>联系电话：</span>
				<el-input placeholder="请输入联系电话..." v-model="fetchPhone" :readonly="this.fetchWay == 2?true:false" maxLength="11"></el-input>
			</div>
			<div class="addName marB"><span>取货地址：</span>
				<el-input placeholder="请输入取货地址..." v-model="fetchAddress" :readonly="this.fetchWay == 2?true:false"></el-input>
			</div>
			<div class="addName marB"><span>商品数量：</span>
				<el-input placeholder="请输入商品数量..." v-model="itemStock"></el-input>
			</div>
			<div class="addSubTuijian marB">
				<span>活动分类：</span>
				<el-select v-model="activityType" placeholder="请选择活动分类">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</div>
			<div class="addTime marB">
				<span>活动时间：</span>
				<el-date-picker v-model="activityStartTime" type="datetime" placeholder="选择开始时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
				<em>——</em>
				<el-date-picker v-model="activityEndTime" type="datetime" placeholder="选择结束时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
			</div>
			<div class="addsome marB clearFix">
				<span style="float: left;">商品图片：</span>
				<div class="allImg" style="position: relative;">
					<el-upload action="###" :headers="myHeaders" list-type="picture-card" :file-list="shopItemPictureVoList" :limit="6" :on-remove="handleRemove" :on-exceed="maxLimit" :show-file-list="true":http-request="uploadImgList">
					  	<i class="el-icon-plus"><b>上传图片</b></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
					  <img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</div>
			</div>
			<div class="addSubJieshao" style="overflow: hidden;height: auto;">
				<span style="margin-bottom: 25px;display: block;width: 96px;text-align: right;">商品介绍：</span>
				<vue-ueditor-wrap v-model="msg" :config="myConfig" style="margin-left: 85px;"></vue-ueditor-wrap>
			</div>
			<div class="addSubJieshao marB" style="margin-top: 30px;">
				<span>是否推荐：</span>
				<el-radio-group v-model="isrecommend">
					<el-radio :label="1" name="radioType">是</el-radio>
					<el-radio :label="0" name="radioType">否</el-radio>
				</el-radio-group>
			</div>
			<div class="addsome marB clearFix">
				<span style="float: left;">轮播图片：</span>
				<div class="allImg">
					<el-upload class="avatar-uploader" refs="uploadxls" action="http://www.h3clearning.com/huathree-back/uploadFile" :headers="myHeaders" :show-file-list="false" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">
					  <img v-if="imageUrl" :src="imageUrl" class="avatar">
					  <i v-else class="el-icon-plus avatar-uploader-icon"><b style="display:block;font-weight:normal"><em>上传图片</em></b></i>
					</el-upload>
				</div>
			</div>
			<div class="footerButton">
				<a @click="checkSave" v-bind:style="{background: clickLock==true ? '#44CEF6' : '#3a8ee6'}">保存</a>
				<a @click="cancel" class="cancel">取消</a>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	export default {
		data() {
			return {
				clickLock:true,
				nowType: 'add',
				updateTitle: '',
				// 编辑绑定的内容start
				imageNum:0,//图片下标
				id:'',
				itemName: "",
				itemPrice:'',
				fetchWay:'',
				fetchPhone:'',
				fetchAddress:'',
				itemStock:'',
				activityType:'',
				activityStartTime:'',
				activityEndTime:'',
				isrecommend:0,
				fileList:[],
				dialogImageUrl: '',
				dialogVisible: false,
				imageUrl: "",
				msg: '',
				shopItemPictureVoList:[],
				option: [{
					value: 1,
					label: '自提'
				}, {
					value: 2,
					label: '包邮'
				}],
				options: [{
					value: 1,
					label: '卡券'
				}, {
					value: 2,
					label: '商品'
				}],
				myConfig: {
					autoHeightEnabled: false,
					initialFrameHeight: 420,
					initialFrameWidth: '840'
				},
				myHeaders:{Authorization:this.$root.userInfoMsg.sessionId}
			}
		},
		methods: {
			getParams(){
				var routerParams = this.$route.params.type;
				if(routerParams == 'edit') {
					this.nowType = 'edit';
					this.updateTitle = "编辑商品";
				} else {
					this.nowType = 'add';
					this.updateTitle = "添加商品";
				}
			},
			//深复制对象方法    
            cloneObj (obj) {  
                var newObj = {};  
                if (obj instanceof Array) {  
                    newObj = [];  
                }  
                for (var key in obj) {  
                    var val = obj[key];  
                    //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。  
                    newObj[key] = typeof val === 'object' ? this.cloneObj(val): val;  
                }  
                return newObj;  
            },
			newAdd() {
				let that = this;
				var arrayList=this.cloneObj(that.shopItemPictureVoList);
				arrayList.forEach(element => {
					element.pictureUrl=element.url
					delete element.url;
					delete element.status;
					delete element.uid;
				});
				if(this.clickLock==true){
					this.clickLock=false;
					this.$ajax({
						url: this.$root.jifuUrl + '/mns/shopItem/addShopItemDetails',
						headers:{'ContentType': 'application/json; charset=utf-8'},
						data: {
							companyId:1,
							itemName: that.itemName,
							itemPrice: that.itemPrice,
							fetchWay: that.fetchWay,
							fetchPhone: that.fetchPhone,
							fetchAddress: that.fetchAddress,
							itemStock: that.itemStock,
							activityType: that.activityType,
							activityStartTime: that.activityStartTime,
							activityEndTime: that.activityEndTime,
							itemDesc:that.msg,
							isrecommend:that.isrecommend,
							itemRecommendImg: that.imageUrl,
							createUser:this.$root.userInfoMsg.id,//此处需要更换为正确值
							shopItemPictureVoList:arrayList
						},
						method: 'POST',
						success: res => {
							if(res.data.code == 200) {
								this.$refs.alert.show({alertText: '保存成功',alertSubmit:function(){alertStatus: 0}});
								setTimeout(() =>{
									this.$router.push({
										name:'goods'
									});
								},2000)
							}else{
								this.clickLock = true;
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			editnews() {
				let that = this;
				var arrayList=this.cloneObj(that.shopItemPictureVoList);
				arrayList.forEach(element => {
					element.pictureUrl=element.url
					delete element.url;
					delete element.status;
					delete element.uid;
				});
				let editDetail = {
					id:that.id,
					companyId:1,
					itemName: that.itemName,
					itemPrice: that.itemPrice,
					fetchWay: that.fetchWay,
					fetchPhone: that.fetchPhone,
					fetchAddress: that.fetchAddress,
					itemStock: that.itemStock,
					activityType: that.activityType,
					activityStartTime: that.activityStartTime,
					activityEndTime: that.activityEndTime,
					itemDesc:that.msg,
					isrecommend:that.isrecommend,
					itemRecommendImg: that.imageUrl,
					createUser:this.$root.userInfoMsg.id,//此处需要更换为正确值
					shopItemPictureVoList:arrayList
				};
				this.$ajax({
					url: this.$root.jifuUrl + '/mns/shopItem/updateShopItemDetails',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: editDetail,					
					method: 'PUT',
					success: res => {
						if(res.data.code == 200) {
							this.$refs.alert.show({alertText: '保存成功',alertSubmit:function(){alertStatus: 0}});
							setTimeout(() =>{
								this.$router.push({
									name:'news'
								});
							},2000)
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			checkSave() {
				if(this.nowType == 'add') {
					this.newAdd();
				}else if(this.nowType == 'edit') {
					this.editnews();
				}
			},
			cancel() {
			    this.$router.go(-1);
			},
			handleAvatarSuccess(res, file) {
				if(res.code == 200) {
					this.imageUrl = res.data[0];
				};
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png');
				const isLt2M = file.size / 1024 / 1024 < 2;
				const isrecommend = this.isrecommend!=0
				if(!isrecommend) {
					this.$message.error('当前状态不可上传!');
				}
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M && isrecommend;
			},
			handleRemove(file, fileList) {
				this.shopItemPictureVoList.forEach(function(item, index, arr) {
					if(item.uid == file.uid) {
						arr.splice(index, 1);
					}
				});
		    },
		    handlePictureCardPreview(file) {
		        this.dialogImageUrl = file.url;
		        this.dialogVisible = true;
			},
			maxLimit(files, fileList){
				alert("图片图多传6张");	
			},
		    uploadImgList(item){
				let formData = new FormData()
				formData.append('file', item.file)
				this.$ajax({
					url: "http://www.h3clearning.com/huathree-back/uploadFileBackObject",
				//	cache: false, //上传文件不需要缓存
					data: formData,
				//	processData: false, // 告诉jQuery不要去处理发送的数据
					//headers:{"ContentType": "application/json; charset=utf-8"}, // 告诉jQuery不要去设置Content-Type请求头
					method: 'POST',
					success: res => {
						this.shopItemPictureVoList.push({pictureName:item.file.name,url:res.data.data[0].path});
					}
				})
			}
		},
		mounted() {
			this.getParams();
			if(this.nowType == "edit") {
				console.log('306', this.nowType, this.$root.goodsMsg);
				this.id = this.$root.goodsMsg.id;
				this.itemName = this.$root.goodsMsg.itemName;
				this.itemPrice = this.$root.goodsMsg.itemPrice;
				this.fetchWay = this.$root.goodsMsg.fetchWay;
				this.fetchPhone = this.$root.goodsMsg.fetchPhone;
				this.fetchAddress = this.$root.goodsMsg.fetchAddress;
				this.itemStock = this.$root.goodsMsg.itemStock;
				this.activityType = this.$root.goodsMsg.activityType;
				this.activityStartTime = this.$root.goodsMsg.activityStartTime;
				this.activityEndTime = this.$root.goodsMsg.activityEndTime;
				this.msg = this.$root.goodsMsg.itemDesc;
				this.isrecommend = this.$root.goodsMsg.isrecommend;
				this.imageUrl = this.$root.goodsMsg.itemRecommendImg;
				this.shopItemPictureVoList=this.$root.goodsMsg.shopItemPictureVoList;
				this.shopItemPictureVoList.forEach(element => {
					element.url=element.pictureUrl
					delete element.pictureUrl;
				});
			};
		}
	}
</script>

<style>
	.addGoods .updownvideo {position:absolute;top:0;left:100px;}
	.telPhone .el-form-item__label {font-size:16px;color:#333;text-align:left;padding:0;}
	.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {display:none;}
	.telPhone input {width:217px;height:34px;line-height:34px;font-size:14px;color:#333;}
	.addGoods .addSubVideolist .updownvideo,.addGoods .addSubVideolist .avatar-uploader,.addGoods .addSubVideolist .avatar-uploader .el-upload,.addGoods .addSubVideolist .avatar-uploader-icon {width:170px;height:84px;}
	.addGoods .avatar-uploader {width:100px;height:100px;}
	.addGoods .el-button--primary.is-active,.addGoods .el-button--primary:active {background:#44CEF6;border:none}
	.addGoods .el-button--small,.addGoods .el-button--small.is-round {padding:0;}
	.addGoods .upload-demo span {border:none;font-size:14px!important;color:#fff!important;}
	.addGoods .upload-demo .el-button {border:none;}
	.addGoods .addSubVideo,.addSubVideolist {height:117px!important;position:relative;}
	.addSubVideo .el-upload-list {position:absolute;top:0;left:126px;}
	.addGoods .el-upload-list__item-name {font-size:14px;color:#333;}
	.addGoods .el-button {background:#44CEF6;height:33px;line-height:33px;width:100px;display:inline-block;padding:0;border:0;margin-top:135px;}
	.addGoods .el-button:hover {background:#31c7f2;}
	.addGoods .el-select input[type="text"] {height:34px!important;width:155px;}
	.addGoods .el-input__icon {line-height:35px;}
	.addGoods .avatar-uploader .el-upload {border-radius:6px;cursor:pointer;position:relative;overflow:hidden;width:100px;height:100px;}
	.addGoods .avatar-uploader .el-upload:hover {border-color:#409EFF;}
	.addGoods .avatar-uploader-icon {font-size:28px;color:#8c939d;width:100px;height:100px;text-align:center;background:#f2f2f2;padding-top:22px;}
	.addGoods .avatar-uploader-icon b {color:#ccc;display:block;font-weight:normal;font-size:14px;margin-top:3px;}
	.addGoods .avatar {width:100px;height:100px;display:block;}
	.addGoods .addName span,.addGoods .addSubVideo span,.addGoods .addsome span,.addGoods .addSubVideolist span,.addGoods .addSubTuijian span,.addGoods .skillContainer span,.addGoods .addTime span,.addGoods .addSubJieshao span {width:96px;display:inline-block;text-align:right;}
	.addGoods .addTime .el-date-editor input {width:216px;height:34px;line-height:34px;}
	.addGoods .addTime span.el-input__prefix,.addGoods .addTime span.el-input__suffix i {width:20px;color:#ccc;}
	.el-date-editor.el-input,.el-date-editor.el-input__inner {width:216px;}
	.addGoods .addTime em {width:36px;display:inline-block;color:#ccc;}
	.addGoods .addSubVideo span,.addSubVideolist span {position:absolute;top:0;left:0;}
	.addGoods .addName .el-input,.addGoods .addName .el-input input {width:217px;height:34px;display:inline-block;font-size:14px;color:#333;}
	.addGoods .addName.from .el-input,.addGoods .addName.from .el-input input {width:146px;}
	.addGoods .addName.enterprise .el-input,.addGoods .addName.enterprise .el-input input {width:217px;}
	.addGoods .addName.text .el-input,.addGoods .addName.text .el-input input {width:217px;}
	.addGoods .addName.zhuce em {font-size:14px;color:#333;font-style:normal;}
	.addGoods span {font-size:16px;color:#333;}
	.addGoods .updownvideo em,.addGoods .addsome em {font-style:normal;font-size:12px;color:#ccc;margin-top:8px;display:block;line-height:16px;}
	.addGoods .teacherSkills {position:relative;height:34px;line-height:34px;margin-bottom:10px;}
	.addGoods .skillDetail {width:450px;height:32px;line-height:32px;border:1px solid #ccc;border-radius:5px;position:absolute;top:0;left:101px;}
	.addGoods .skillDetail i {font-style:normal;color:#ccc;position:relative;top:-4px;margin-left:4px;cursor:pointer;}
	.addGoods .skillDetail span,.addGoods .skillContent span {color:#44CEF6;font-size:14px;width:auto!important;margin-left:15px;cursor:pointer;}
	.addGoods .skillContent {margin-left:87px;}
	.addName {position:relative;}
	.addName .select-box {width:300px;position:absolute;top:0;left:101px;}
	.addName .select-box span {text-align:left;width:65px;margin-right:5px;}
	.addName .select-box select {width:100%;height:32px;line-height:32px;border:1px solid #ccc;font-size:14px;color:#333;border-radius:5px;}
	.addCont .el-select input {font-size:14px!important;}
	.addsome {height:100px;overflow:hidden;}
	.allImg {display:inline-block;}
	.allImg .el-upload--picture-card {line-height:100px;}
	.allImg .el-upload,.allImg .el-upload-list__item.is-success {width:100px!important;height:100px;border:none;background:#f2f2f2;overflow:hidden;margin-top:0;position:relative;}
	.allImg .el-upload-list {width:100px!important;background:#fff;}
	.allImg .el-upload i {padding-top:23px;}
	.allImg .el-upload b {font-size:14px;font-weight:normal;color:#ccc;display:block;margin-top:5px;}
	.allImg .el-upload-list__item,.el-upload-list.el-upload-list--picture-card,.el-upload-list__item-thumbnail {transition:none !important;width:100px!important;height:100px;border:0;}
	.allImg .el-upload-list__item-preview,.allImg .el-upload-list__item-delete {width:0;height:0}
	.el-dialog {width:30%!important}
	.edui-editor-breadcrumb span {width:auto!important}
	.addSubJieshao label {margin-right:30px;color:#333;}
	.addSubJieshao label input {margin-right:5px;}
	.footerButton a {width:100px;height:34px;line-height:34px;display:inline-block;font-size:14px;margin-top:165px;background:#44CEF6;color:#fff;border-radius:4px;text-align:center;margin-left:304px;cursor:pointer;}
	.footerButton a.cancel {margin-left:208px;background:#ccc;}
	.el-radio__input,.el-radio__inner {width:14px!important;}
	.el-radio__label {width:auto!important;}
	.addGoods .el-radio__input.is-checked .el-radio__inner {color:#ccc;background:#ccc;border-color:#ccc}
	.addGoods .el-radio__input.is-checked+.el-radio__label {color:#333;}
	.addGoods .el-radio__inner:hover {border:1px solid #ccc;}
	.addGoods .addTime .el-input--prefix .el-input__inner {padding-left:30px!important;}
	/*图片列表删除按钮*/
	.addGoods .addsome span.el-upload-list__item-delete {width:100px;height:100px;left:0;top:0;position:absolute}
	.addGoods .addsome span.el-upload-list__item-delete i {line-height:100px!important;margin:0 auto;width:20px;display:block;position:absolute;left:40px}
	.addGoods .addsome .el-upload-list__item-actions {width:100px!important}
	.el-upload-list__item.is-success .el-upload-list__item-status-label {display:none;}
	.el-upload-list__item-status-label,.el-icon-close,.el-icon-close-tip {display:none;}
</style>